<template>
  <div class="foot_styl">
    <div class="foot_title">
      <div class="tip_styl" v-for="(item, index) in dataList" :key="index">
        <Icons :font="'#' + item.icon" :class="item.icon" fontSize="45px"></Icons>
        <div class="tip_right">
          <div class="tip_name">{{ item.name }}</div>
          <div class="tip_title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <div class="bottom_styl">
      <div class="foot_top">
        <div class="top_left">
          <img class="img_styl" src="@/assets/images/footImg.png" style="height:64px" alt sizes srcset />
          <div class="phone_styl">
            <div class="font_styl">客服热线:</div>
            <div class="font_styl">+(86) 546-887 1888</div>
          </div>

        </div>
        <div class="top_middle">
          <Lines class="line_styl" backColor="#ffffff" heightNum="84px"></Lines>

          <div class="middle1">
            <div class="middle1_name">平台规则</div>
            <div class="middle1_name">入市协议</div>
            <div class="middle1_name">挂牌交易规则</div>
            <div class="middle1_name">竞价交易规则</div>
          </div>
          <Lines class="line_styl" backColor="#ffffff" heightNum="84px"></Lines>
          <div class="middle1">
            <div class="middle1_name">帮助中心</div>
            <div class="middle1_name">常见问题</div>
            <div class="middle1_name">操作指南</div>
            <div class="middle1_name">联系我们</div>
          </div>
          <Lines class="line_styl" backColor="#ffffff" heightNum="84px"></Lines>
          <div class="middle1">
            <div class="middle1_name">企业信息</div>
            <div class="middle1_name">企业公售</div>
            <div class="middle1_name">公司活动</div>
            <div class="middle1_name">公司地图</div>
          </div>
          <Lines class="line_styl" backColor="#ffffff" heightNum="84px"></Lines>
        </div>
        <div class="top_right">
          <div class="right_vx">
            <div class="imgbox_styl">

            </div>
            <!-- <img
              class="img_styl"
              src="@/assets/images/official.png"
              alt
              srcset
            /> -->
            <div class="title_styl">微信公众号</div>
          </div>
          <div class="right_gz">
            <div class="imgbox_styl">

            </div>
            <!-- <img
              class="img_styl"
              src="@/assets/images/appDown.png"
              alt
              srcset
            /> -->
            <div class="title_styl">振华APP</div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot_bottom">
      <div>鲁ICP备20230905号-5 鲁公网安备 1234567897号 Copyright © 2023 All Rights Reserved. </div>
      <div>本平台所售产品中包含易燃易爆危险品，请在购买前确认购买所需相关资质</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      dataList: [
        {
          id: 0,
          icon: 'icon-zy',
          name: '质优价廉',
          title: '品质保障，专享实惠货源',
        },
        {
          id: 1,
          icon: 'icon-hl001',
          name: '海量货源',
          title: '10万+化工商品，覆盖300+品类',
        },
        {
          id: 2,
          icon: 'icon-jscg',
          name: '极速采购',
          title: '询价*交易*签合同*采购一站式服务更省心',
        },
        {
          id: 3,
          icon: 'icon-qwjc',
          name: '权威检测',
          title: '国家权威机构检测，产品双重资质认证',
        },
      ]
    };
  },
  created() { },
  mounted() { }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.foot_styl {
  width: 100%;
  min-width: 1200px;
  background-color: #252525;

  .foot_title {
    .flex-x();
    height: 68px;
    padding: 0 calc(~"(100% - 1185px)/2");
    background-color: @themeColor;

    .tip_styl {
      .flex-x();

      .tip_right {
        margin-left: 10px;
        text-align: left;
        color: #ffffff;

        .tip_name {
          font-weight: bold;
          font-size: 14px;
        }

        .tip_title {
          font-size: 12px;
        }
      }
    }
  }

  .bottom_styl {
    padding: 0 calc(~"(100% - 1185px)/2");

    .foot_top {
      .flex-x();
      width: 100%;
      margin-top: 30px;

      .top_left {
        .flex-x();

        .phone_styl {
          margin-left: 33px;
          text-align: left;
          font-size: 18px;
          color: #ffffff;
        }
      }

      .top_middle {
        .flex-x();
        align-items: flex-start;
        width: 460px;
        padding: 0 40px;

        .middle1 {
          font-size: 12px;

          .middle1_name {
            margin-bottom: 10px;
            cursor: pointer;
            color: #ffffff;
          }

          .middle1_name:hover {
            color: @themeColor;
          }
        }
      }

      .top_right {
        .flex-x();
        color: #efefef;

        .right_vx {
          .flex-y(center);
          margin-right: 15px;


        }

        .right_gz {
          .flex-y(center);
        }

        .imgbox_styl {
          width: 120px;
          height: 120px;
          background: white;
        }

        .img_styl {
          width: 120px;
          height: 120px;
        }

        .title_styl {
          margin: 10px 0;
        }
      }
    }
  }

  .foot_bottom {
    height: 68px;
    padding-top: 20px;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    background-color: #121212;
  }
}
</style>
